<template>
    <div class="jianzhan-content">
        <Crumb name="Sales Order"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Qutation Number"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="saleList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        border
                        stripe
                        style="width: 100%">

                    <el-table-column
                            prop="saleNo"
                            label="Sale No"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="quotationNo"
                            label="Quotation No"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="quotationDate"
                            label="Quotation Date"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="quotationBy"
                            label="Quotation By"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="customer"
                            label="Customer"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="price"
                            label="price"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.price | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Detail
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
            <el-dialog
                    title="Detail"
                    :visible.sync="dialogVisible"
                    width="80%"
            >
                <el-form :model="ruleForm" label-width="150px" inline>
                    <el-form-item label="Sales Order">
                        <span class="text">{{ruleForm.saleNo}}</span>
                    </el-form-item>
                    <el-form-item label="Quotation No">
                        <span class="text">{{ruleForm.quotationNo}}</span>
                    </el-form-item>
                    <el-form-item label="Quotation Date">
                        <span class="text">{{ruleForm.quotationDate}}</span>
                    </el-form-item>
                    <el-form-item label="Customer">
                        <span class="text">{{ruleForm.customerName}}</span>
                    </el-form-item>
                    <el-form-item label="Address">
                        <span class="text">{{ruleForm.addressStr}}</span>
                    </el-form-item>
                    <el-form-item label="contact">
                        <span class="text">{{ruleForm.contactName}}</span>
                    </el-form-item>
                    <el-form-item label="Phone">
                        <span class="text">{{ruleForm.phoneNumber}}</span>
                    </el-form-item>
                    <el-form-item label="Discount">
                        <span class="text">{{ruleForm.discount}}</span>
                    </el-form-item>
                    <el-form-item label="ppn">
                        <span class="text">{{ruleForm.ppn}}</span>
                    </el-form-item>
                    <el-form-item label="Shipment">
                        <span class="text">{{ruleForm.shipmentDesc}}</span>
                    </el-form-item>
                    <el-form-item label="shipment fee">
                        <span class="text">{{ruleForm.shipmentFee}}</span>
                    </el-form-item>
                    <el-form-item label="Total Price">
                        <span class="text">{{ruleForm.price}}</span>
                    </el-form-item>
                    <Data-base @deleteItem="deleteItem" :partList="partList" :edit="false"/>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">OK</el-button>
          </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import mixins from '../../util/mixins'
    import dbMixins from '../../util/spMixins'
    import DataBase from '@/components/part/spDataBase'
    import {getSalesOrderList, getSalesOrderDetail} from "../../api/quotation";
    import {ERROR_OK} from "../../util/config";
    import {money} from "../../util";

    export default {
        name: "info-collect",
        mixins: [mixins, dbMixins],
        data() {
            return {
                saleList: [],
                key: '',
                ruleForm: {
                    saleNo: '',
                    quotationNo: '',
                    quotationDate: '',
                    customerName: '',
                    addressStr: '',
                    contactName: '',
                    phoneNumber: '',
                    discount: '',
                    ppn: '',
                    shipmentDesc: '',
                    shipmentFee: '',
                    price: ''
                },
                dialogVisible: false
            }
        },
        filters: {

            numFilter(value) {

                // 截取当前数据到小数点后两位

                let realVal = Number(value).toFixed(2);

                // num.toFixed(2)获取的是字符串

                return Number(realVal)

            },
            money(m) {
                return money(m)
            }

        },
        created() {
            this.getSaleList();
        },
        methods: {
            async getSaleList() {
                const {status, data} = await getSalesOrderList();
                if (status === ERROR_OK) {
                    this.saleList = data;
                    this.total = data.length;
                }
            },
            async getSaleDetail(id) {
                const {status, data} = await getSalesOrderDetail(id);
                if (status === ERROR_OK) {
                    this.ruleForm = data;
                    if (data.spareQuotationDetailVoList) {
                        this.partList = data.spareQuotationDetailVoList.map(item => {
                            return {
                                ...item,
                                number: item.quantity,
                                partsNumber: item.partNo,
                                salesPrice: item.unitPrice * data.coefficient,
                                quantity: item.stockQuantity
                            }
                        })
                    } else {
                        this.partList = []
                    }
                }
            },
            submitForm() {
                this.dialogVisible = false
            },
            openEdit(row) {
                this.dialogVisible = true;
                this.getSaleDetail(row.id);
            },
            changePage(page) {
                alert(page)
            }
        },
        components: {
            Crumb, Search, DataBase
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }

    .text {
        text-decoration: underline;
        display: inline-block;
        width: 200px;
    }

    .price {
        font-size: 20px;
        margin-top: 30px;
        text-align: center;
    }

    .spin {
        border-bottom: 2px solid #ddd;
        margin-bottom: 30px;
    }

    .input {
        width: 200px;
    }

</style>